<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 120px;
            height: 120px;
            background-color: #E7E7E7;
            border-radius: 10%;
            box-shadow: 0 5px 0 #D7D7D7;
            /* padding: 5px; */
            float: left;
            margin-right: 10px;
            display: flex;
        }

        .box1 {
            align-items: center;
            /* y轴上居中*/
            justify-content: center;
            /* 水平垂直居中(中心)*/
        }

        .item {
            width: 20px;
            height: 20px;
            background-color: #333;
            border-radius: 50%;
            box-shadow: 0 2.5px 0 gray;
            margin: 10px;
            box-sizing: border-box;
        }

        .box2 {
            justify-content: space-around;
            /*每一行元素上下都享有独立不重叠的空白空间。*/
            /* align-items: center; */
        }

        /* .box3 {
            justify-content: space-between; 表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
        } */

        /* .box3 .item:nth-child(2) {
            align-self: center;         等同101
        } */

        /* .box3 .item:nth-child(3) {
            align-self: flex-end;   等同102
        } */

        .box4 {
            flex-wrap: wrap;
            align-content: space-between;
        }

        .box5 {
            flex-wrap: wrap;
        }

        .box5 .column {
            flex-basis: 100%;
            /*定义了在分配剩余空间之前元素的默认大小。*/
            display: flex;
            justify-content: space-between;
            /*两端对齐*/
        }

        .box5 .column:nth-child(2) {
            justify-content: center;
            /*五 中间的点居中*/
        }

        .column {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }

        .box6 {
            flex-wrap: wrap;
            align-content: space-between;
            flex-direction: column;
            /*反方向*/
        }

        .box7 {
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div class="box box1">
        <div class="item"></div>
    </div>
    <div class="box box2">
        <div class="item"></div>
        <div class="item" style="align-self: flex-end;"></div>
    </div>
    <div class="box box3">
        <div class="item"></div>
        <div class="item" style="align-self: center;"></div>
        <div class="item" style="align-self: flex-end;"></div>
    </div>
    <div class="box box4">
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="box box5">
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
        </div>
        <div class="column">
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="box box6">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="box box7">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>